<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</head>
<body>
    用户名：<input type="text" placeholder="以，分割" name="username" id="username"/>
    年龄：<input type="text" placeholder="以，分割" name="age" id="age"/>
    用户类型：<input type="text" name="user_type__caption" id="user_type__caption"/>
    <input type="button" value="查询" id="search"/>

    <ul id="ret"></ul>

    <script src="/static/js/jquery-2.1.4.js"></script>
    <script type="text/javascript">

        $(function(){
            $('#search').click(function(){
                var username = $('#username').val();
                var age = $('#age').val();
                var user_type__caption = $('#user_type__caption').val();
                $.ajax({
                    url:'{% url "index" %}',
                    type:'POST',
                    data:{'username':username,'age':age,'user_type__caption':user_type__caption},
                    success:function(callback){
{#                        console.log(callback);   <!-- {'username': u'user1', u'user_type_id': 1, 'age': 18, u'id': 1}{'username': u'user3', u'user_type_id': 2, 'age': 18, u'id': 3} -->#}
                        $.each(callback,function(i){
                            var username = callback[i].username;
                            var age = callback[i].age;
                            html = '<li>'+username+'</li><li>'+age+'</li>'
                            $('#ret').append(html)
                        });
                    }
                });
            })
        });

{#        csrftoken#}
        var csrftoken = getCookie('csrftoken');
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
    </script>
</body>
</html>